<template>
  <div>
    <view class="privacy" v-if="innerShow">
      <view class="content">
        <view class="title">{{ title }}</view>
        <view class="des">
          {{ desc1
          }}<text class="link" @click="openPrivacyContract">{{ urlTitle }}</text
          >{{ desc2 }}
        </view>
        <view class="btns">
          <button class="item reject" @click="handleDisagree">拒绝</button>
          <button
            id="agree-btn"
            class="item agree"
            open-type="agreePrivacyAuthorization"
            @click="handleAgree"
          >
            同意
          </button>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      title: "用户隐私保护提示",
      desc1: "在使用当前小程序服务之前，请仔细阅读",
      urlTitle: "《用户隐私保护指引》",
      desc2:
        "请点击“同意”开始使用，当您点击同意时，即表示你已理解并同息该条款内容。如您拒绝，将无法进入该小程序。",
      innerShow: false,
    };
  },
  watch: {},
  methods: {
    handleDisagree(e) {
      const that = this;
      uni.showModal({
        content: "如果拒绝,部分功能将异常,您确定要拒绝吗?",
        success: (res) => {
          if (res.confirm) {
            that.disPopUp();
            uni.exitMiniProgram();
          }
        },
      });
    },
    handleAgree(e) {
      this.$emit("agree", "agree");
      this.disPopUp();
    },
    popUp() {
      this.innerShow = true;
    },
    disPopUp() {
      this.innerShow = false;
    },
    openPrivacyContract() {
      wx.openPrivacyContract({
        fail: () => {
          uni.showToast({
            title: "网络错误",
            icon: "error",
          });
        },
      });
    },
  },
  created() {},
  onReady() {
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: (res) => {
          console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName);
          if (res.needAuthorization) {
            this.popUp();
          } else {
            this.$emit("agree", "agree");
          }
        },
        fail: () => {},
        complete: () => {},
      });
    } else {
      // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
      this.$emit("agree", "agree");
    }
  },
};
</script>
<style scoped lang='scss'>
.privacy {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 632rpx;
  padding: 48rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
}

.content .title {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.content .des {
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  text-align: justify;
  line-height: 1.6;
}

.content .des .link {
  color: #ff4d03;
  text-decoration: underline;
}

.btns {
  margin-top: 48rpx;
  display: flex;
}

.btns .item {
  justify-content: space-between;
  width: 244rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
}

.btns .reject {
  background: #f4f4f5;
  color: #909399;
}

.btns .agree {
  background: linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%) !important;
  color: #fff;
}
</style>
